<script setup>
import HelloWorld from "./components/HelloWorld.vue";
import Vmodel from "./components/Vmodel.vue";
import BasicCommand from "./components/BasicCommand.vue";
import LocalComDemo from "./components/LocalComDemo.vue";
import ParentCom from "./components/ParentCom.vue";
import SlotCom from "./components/SlotCom.vue";
import SlotName from "./components/SlotName.vue";
import Father from "./components/Father.vue";
import Demo from "./components/Demo.vue";
import LianXi from "./components/LianXi.vue";
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { elementLocales } from "./i18n"
const { locale } = useI18n()
locale.value = localStorage.getItem('locale') || 'zh-cn'
</script>

<template>
  <el-configi-provider :locale="elementLocales[locale]">
    <RouterView></RouterView>
    </el-configi-provider:locale>

    <ul>
      <li>
        <router-link to="/home">Home</router-link>
      </li>
      <li>
        <router-link to="/about">About</router-link>
      </li>
      <li>
        <router-link to="/user">用户中心</router-link>
      </li>

      <li>
        <router-link to="/vuex">Vuex</router-link>
      </li>
      <li>
        <router-link to="/element">Element</router-link>
      </li>
      <li>
        <router-link to="/list-demo">list-demo</router-link>
      </li>
      <!-- <li>
    <router-link to="/tpForm">tpForm</router-link>
  </li> -->
      <li>
        <router-link to="/checkForm">checkForm</router-link>
      </li>
      <li>
        <router-link to="/register">register</router-link>
      </li>
      <li>
        <router-link to="/account-list">account-list</router-link>
      </li>
    </ul>
    <div>
      <router-view></router-view>
    </div>
    <!-- <Demo /> -->
    <!-- <HelloWorld msg="You did it!" /> -->
    <!-- <Vmodel /> -->
    <!-- <BasicCommand />
  <GlobalComDemo />
  <GlobalComDemo />
  <GlobalComDemo />
  <GlobalComDemo />

  <LocalComDemo />
  <LocalComDemo />
  <LocalComDemo />
  <LocalComDemo /> -->

    <!-- <ParentCom />
  <SlotCom>
    <p>这是来自父组件的内容</p>
  </SlotCom>

  <SlotName>
    <template v-slot:header>
      <p>这是要放入header的内容</p>
    </template>
    <template #footer>
      <p>这是要放入footer的内容</p>
    </template>
    
  </SlotName>

  <Father /> -->

    <!-- <LianXi/> -->
</template>

<style lang="scss">
html,
body {
  height: 100%;
}

#app {
  height: 100%;
  overflow: hidden;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
